﻿@{
    ViewBag.Title = "SetMobile";
    Layout = "~/Views/Shared/_Member.cshtml";
    RooHui.Infrastructure.Entities.Entity.Member member = ViewBag.Member;
}
@section head{
    <link rel="stylesheet" href="/content/css/memberStyle.css" />
    <link rel="stylesheet" href="/content/css/pages/page_reg.css" />
    <style type="text/css">
        .alerterror
        {
            color: rgb(185, 74, 72);
            background-color: rgb(242, 222, 222);
            border-color: rgb(238, 211, 215);
        }
    </style>
}
<div class="breadcrumbs margin-bottom-40">
    <div class="container">
        <h3 class="pull-left blue">
            手机认证</h3>
    </div>
</div>
<div class="container">
    <div class="row-fluid">
        <div class="span6 offset3" style="height: 500px;">
            <div class="reg-page tab-pane active" style="padding: 5px 10px; background-color: #f7f7f7;"
                id="emailtype">
                <div class="reg-header">
                    <h2>
                        绑定手机号</h2>
                </div>
                <form id="setmobileform" action="/member/setmobile" method="post">
                <div id="mobilebox" class="row-fluid">
                    @if (!String.IsNullOrEmpty(ViewBag.Message))
                    {
                        <div class="alert alerterror">
                            @ViewBag.Message
                        </div> 
                    }
                    <div class="control-group">
                        <label class="control-label">
                            用户名：</label>
                        <div class="controls">
                            <input class="span12" id="txtusername" disabled="disabled" value="@member.UserName" 
                                name="username" type="text" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            手机号 <span class="color-red">*</span>：</label>
                        <div class="controls">
                            <input class="span12 {required:true,length:11,digits:true}" id="txtmobile" name="mobile"
                                type="text" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            手机验证码</label>
                        <div class="controls input-append">
                            <input class="input {required:true,length:6,digits:true}" id="txtMobileCode" name="MobileCode"
                                type="text" />
                            <input type="button" name="mobilecode" class="btn" onclick="getMobileCode(this)"
                                value="获取验证码" />
                        </div>
                    </div>
                    <hr />
                    <button type="submit" class="btn btn-primary span12" style="margin-left: 0">
                        确认</button>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
@section scripts{
    <script type="text/javascript" src="/content/plugins/jquery-validate/jquery.validate.js"></script>
    <script type="text/javascript" src="/content/plugins/jquery-validate/jquery.metadata.js"></script>
    <script type="text/javascript">
        var interval;
        var time = 60;
        $(function () {
            $('#setmobileform').validate({
                errorClass: "help-inline",
                errorElement: "span",
                highlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').addClass('error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').removeClass('error');
                }
            });
        });
        function getMobileCode(sender) {
            var username = $('#txtusername').val();
            var mobile = $('#txtmobile').val();
            if (username.length > 0 && /^1\d{10}$/.test(mobile)) {
                $.ajax({
                    url: '/member/getcodeforsetmobile',
                    data: {
                        username: username,
                        mobile: mobile
                    },
                    beforeSend: function () {
                        $('#alt-error').remove();
                        $(sender).attr('disabled', 'disabled');
                    },
                    success: function (result) {
                        if (result == '1') {
                            interval = window.setInterval(function () {
                                if (time > 0) {
                                    $(sender).val(time-- + ' 秒后重新获取');
                                } else {
                                    window.clearInterval(interval);
                                    time = 60;
                                    $(sender).removeAttr('disabled').val('获取验证码');
                                }
                            }, 1000);
                        } else {
                            $('<div id="alt-error" class="alert alerterror">您的输入有误</div>').insertBefore($('#mobilebox').children('div:eq(0)'));
                            $(sender).removeAttr('disabled').val('获取验证码');
                        }
                    }
                });
            } else {
                $('#alt-error').remove();
                $('<div id="alt-error" class="alert alerterror">手机号输入有误，请重新输入</div>').insertBefore($('#mobilebox').children('div:eq(0)'));
            }
        }
    </script>
}
